<template>
	<view class="flex flex-direction pageview">
		<zx-nav title="商品评价" bg="#fff"></zx-nav>
		<view class="flex justify-between reply-hd align-center">
			<view class="flex align-center">
				<text class="title">综合评分</text>
				<tui-rate :current="avg_grade" :disabled="true" :size="20" active="#fc743c"></tui-rate>
				<text class="num">{{ avg_grade }}</text>
			</view>
			<text>共有{{ total }}条评论</text>
		</view>
		<view class="flex-sub main">
			<mescroll-uni style="overflow: auto" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @init="mescrollInit" :fixed="false">
				<view class="list"><cmt-reply v-for="(item, index) in evaluatelist" :key="index" :info="item"></cmt-reply></view>
			</mescroll-uni>
		</view>
	</view>
</template>

<script>
import tuiRate from '@/components/rate/rate';
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import cmtReply from '@/components/cmt-reply';
export default {
	data() {
		return {
			avg_grade: 4,
			id: '',
			evaluatelist: [],
			total: 0,
			downOption: {
				auto: false // 不自动加载
			},
			upOption: {
				auto: false // 不自动加载
			},
			isInit: false
		};
	},
	mixins: [MescrollMixin],
	components: {
		tuiRate,
		cmtReply
	},
	onLoad(option) {
		this.id = option.id;
		if (this.id && this.mescroll && !this.isInit) {
			this.isInit = true; // 标记为true
			this.mescroll.resetUpScroll();
		}
	},
	methods: {
		mescrollInit(mescroll) {
			this.mescroll = mescroll;
			this.mescrollInitByRef(); // 兼容字节跳动小程序
			if (!this.isInit && this.id) {
				this.isInit = true; // 标记为true
				this.mescroll.resetUpScroll();
			}
		},

		upCallback(mescroll) {
			if (this.id) {
				this.getProductEvaluate();
			} else {
				this.mescroll.endSuccess(0, false);
			}
		},
		getProductEvaluate() {
			let pageNum = this.mescroll.num; // 页码, 默认从1开始
			let pageSize = this.mescroll.size;
			let param = {
				page: pageNum,
				limit: pageSize
			};
			this.$postAction(this.$api.getProductEvaluate + this.id, param)
				.then(da => {
					this.total = da.count;
					if (da.data && da.data.length > 0) {
						let curPageData = da.data;
						this.avg_grade = da.avg_grade || 0;
						this.mescroll.endBySize(curPageData.length, da.count);
						if (this.mescroll.num == 1) this.evaluatelist = []; //如果是第一页需手动制空列表
						this.evaluatelist = this.evaluatelist.concat(curPageData); //追加新数据
					} else {
						this.evaluatelist = [];
						this.mescroll.endSuccess(0, false);
					}
				})
				.catch(() => {
					this.evaluatelist = [];
					this.mescroll.endSuccess(0, false);
				});
		}
	}
};
</script>

<style lang="scss">
.pageview,
page {
	height: 100%;
	width: 100%;
	overflow: hidden;
	background: #fff;
	.reply-hd {
		color: #8e8e8d;
		padding: 0 30upx;
		height: 100upx;
		font-size: 28upx;
		border-bottom: 1px solid #eee;

		.title {
			color: #000;
			font-size: 28upx;
			margin-right: 30upx;
		}

		.num {
			color: #fc743c;
			margin-left: 30upx;
		}
	}

	.main {
		overflow: auto;

		.list {
			.cmtreply {
				padding: 10upx 0;
				border-bottom: 1px solid #eee;
			}
		}
	}
}
</style>
